<template>
  <div class='xiaozhong'>
    <div class="top">
      <h1 class="title">小众种草</h1>
      <div class="note">游侠客独一无二的旅行体验</div>
    </div>
    <div class="content">
      <div>
        <div v-for='(item,index) in xiaozhong' :key='index' :style='{backgroundImage:"url("+item.pho+")"}'>
          <h1>{{item.title}}</h1>
          <div>{{item.txt}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Xiaozhong',
  data () {
    return {
      xiaozhong: [
        {
          pho: '/static/Home/xiaozhong1.jpg',
          title: '秋收节',
          txt: '去金色田野撒欢'
        },
        {
          pho: '/static/Home/xiaozhong2.jpg',
          title: '干塘节',
          txt: '亲子秋日限定'
        },
        {
          pho: '/static/Home/xiaozhong3.jpg',
          title: '轻奢露营',
          txt: '新的户外旅行方式'
        },
        {
          pho: '/static/Home/xiaozhong4.jpg',
          title: '野奢邦',
          txt: '宿于山海中'
        },
        {
          pho: '/static/Home/xiaozhong5.jpg',
          title: '古道传奇',
          txt: '寻觅撩人秋色'
        },
        {
          pho: '/static/Home/xiaozhong6.jpg',
          title: '向野房车',
          txt: '新型旅行方式'
        }
      ]
    }
  }
}
</script>
<style scoped lang='less'>
.xiaozhong{
  margin:10px 0;
  padding: 10px 0 0 10px;
  &>.top{
    display: flex;
    margin-bottom:10px;
    &>.title{
      font-size:18px;
      margin-left:10px;
    }
    &>.note{
      background-color: #fff3ea;
      color: #ff9e51;
      border-radius:10px;
      height: 16px;
      line-height: 16px;
      padding:4px;
      margin-left:10px;
    }
  }
  &>.content{
    height: 190px;
    overflow: auto;
    &::-webkit-scrollbar{
      width: 0;
    }
    &>div{
      width: 860px;
      height: 100%;
      display: flex;
      justify-content:space-between;
      &>div{
        width: 140px;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        color:#fff;
        &>h1{
          margin-top:120px;
          font-size:18px;

        }
      }
      &>div:first-child{
        border-radius:10px 0 0 10px;
      }
      &>div:last-child{
        border-radius:0 10px 10px 0;
        margin-right:10px;
      }
    }
  }
}
</style>
